<template>
  <div class="address-container">
    <!-- 页面标题和切换按钮 -->
    <div class="address-header">
      <h2>添加收货地址</h2>
      <router-link to="/addresslist">
      <button class="address-list-btn">地址列表</button>
      </router-link>

    </div>

    <!-- 表单内容 -->
    <form class="address-form">
      <!-- 收货人 -->
      <div class="form-group">
        <label class="form-label">收货人 <span class="required">*</span></label>
        <div class="input-wrapper">
          <i class="icon-user"></i>
          <input
            type="text"
            v-model="recipient"
            placeholder="请输入收货人姓名"
            class="form-input"
            required
          >
        </div>
      </div>

      <!-- 联系电话 -->
      <div class="form-group">
        <label class="form-label">联系电话 <span class="required">*</span></label>
        <div class="input-wrapper">
          <i class="icon-phone"></i>
          <input
            type="tel"
            v-model="phone"
            placeholder="请输入手机号码"
            class="form-input"
            required
          >
        </div>
      </div>

      <!-- 所在地区 -->
      <div class="form-group">
        <label class="form-label">所在地区 <span class="required">*</span></label>
        <div class="region-selectors">
          <select v-model="province" @change="onProvinceChange" class="region-select">
            <option value="">请选择省份</option>
            <option v-for="p in provinces" :value="p">{{ p }}</option>
          </select>

          <select v-model="city" @change="onCityChange" class="region-select" :disabled="!province">
            <option value="">请先选择省份</option>
            <option v-for="c in cities" :value="c">{{ c }}</option>
          </select>

          <select v-model="district" class="region-select" :disabled="!city">
            <option value="">请先选择城市</option>
            <option v-for="d in districts" :value="d">{{ d }}</option>
          </select>
        </div>
      </div>

      <!-- 详细地址 -->
      <div class="form-group">
        <label class="form-label">详细地址 <span class="required">*</span></label>
        <div class="input-wrapper">
          <i class="icon-location"></i>
          <textarea
            v-model="detailAddress"
            placeholder="请输入街道门牌号、小区楼栋等详细地址信息"
            class="form-textarea"
            required
          ></textarea>
        </div>
      </div>

      <!-- 邮政编码 -->
      <div class="form-group">
        <label class="form-label">邮政编码</label>
        <div class="input-wrapper">
          <i class="icon-post"></i>
          <input
            type="text"
            v-model="postalCode"
            placeholder="请输入邮政编码（选填）"
            class="form-input"
          >
        </div>
      </div>

      <!-- 默认地址选项 -->
      <div class="default-address-option">
        <input
          type="checkbox"
          id="default-address"
          v-model="isDefault"
          class="default-checkbox"
        >
        <label for="default-address" class="default-label">设为默认收货地址</label>
      </div>

      <!-- 操作按钮 -->
      <div class="form-actions">
<!--        <router-link to="/addresslist"></router-link>-->
        <button type="button" @click="saveAddress" class="btn save-btn">保存地址</button>
        <button type="button" @click="cancel" class="btn cancel-btn">取消</button>
      </div>
    </form>

    <!-- 填写说明 -->
    <div class="instructions">
      <h3>填写说明</h3>
      <ul>
        <li><i class="icon-required"></i>带 <span class="required">*</span> 的为必填项，请务必填写完整</li>
        <li><i class="icon-info"></i>请确保收货地址准确无误，以便顺利收到所购买的咖啡豆</li>
        <li><i class="icon-info"></i>您可以添加多个收货地址，并设置其中一个为默认地址</li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from "@/api/request";

export default {
  data() {
    return {
      // 表单数据
      recipient: '',
      phone: '',
      province: '',
      city: '',
      district: '',
      detailAddress: '',
      postalCode: '',
      isDefault: false,

      // 地区数据
      provinces: [
  '北京市', '天津市', '上海市', '重庆市',
  '河北省', '山西省', '辽宁省', '吉林省', '黑龙江省',
  '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省',
  '河南省', '湖北省', '湖南省', '广东省', '海南省',
  '四川省', '贵州省', '云南省', '陕西省', '甘肃省', '青海省',
  '台湾省',
  '内蒙古自治区', '广西壮族自治区', '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区',
  '香港特别行政区', '澳门特别行政区'
],
      cities: [],
      districts: [],

      // 模拟的地区数据
      cityData: {
  '北京市': ['北京市'],
  '天津市': ['天津市'],
  '上海市': ['上海市'],
  '重庆市': ['重庆市'],
  '河北省': ['石家庄市', '唐山市', '保定市', '邯郸市', '沧州市', '邢台市'],
  '山西省': ['太原市', '大同市', '晋中市', '长治市', '临汾市', '运城市'],
  '辽宁省': ['沈阳市', '大连市'],
  '吉林省': ['长春市', '吉林市'],
  '黑龙江省': ['哈尔滨市', '齐齐哈尔市'],
  '江苏省': ['南京市', '苏州市', '无锡市'],
  '浙江省': ['杭州市', '宁波市', '温州市'],
  '安徽省': ['合肥市', '芜湖市'],
  '福建省': ['福州市', '厦门市'],
  '江西省': ['南昌市', '九江市'],
  '山东省': ['济南市', '青岛市'],
  '河南省': ['郑州市', '洛阳市'],
  '湖北省': ['武汉市', '宜昌市'],
  '湖南省': ['长沙市', '株洲市'],
  '广东省': ['广州市', '深圳市', '佛山市'],
  '海南省': ['海口市', '三亚市'],
  '四川省': ['成都市', '绵阳市'],
  '贵州省': ['贵阳市', '遵义市'],
  '云南省': ['昆明市', '大理市'],
  '陕西省': ['西安市', '咸阳市'],
  '甘肃省': ['兰州市', '天水市'],
  '青海省': ['西宁市'],
  '台湾省': ['台北市', '高雄市'],
  '内蒙古自治区': ['呼和浩特市', '包头市'],
  '广西壮族自治区': ['南宁市', '桂林市'],
  '西藏自治区': ['拉萨市'],
  '宁夏回族自治区': ['银川市'],
  '新疆维吾尔自治区': ['乌鲁木齐市', '喀什市'],
  '香港特别行政区': ['香港'],
  '澳门特别行政区': ['澳门']
},

      districtData: {
  '北京市': ['东城区', '西城区', '朝阳区', '海淀区'],
  '天津市': ['和平区', '河西区', '南开区'],
  '上海市': ['黄浦区', '徐汇区', '长宁区'],
  '重庆市': ['渝中区', '江北区', '南岸区'],
  '石家庄市': ['长安区', '桥西区', '裕华区'],
  '唐山市': ['路南区', '路北区', '曹妃甸区'],
  '保定市': ['竞秀区', '莲池区', '满城区'],
  '邯郸市': ['丛台区', '邯山区', '复兴区'],
  '沧州市': ['运河区', '新华区', '泊头市'],
  '邢台市': ['桥东区', '桥西区', '南宫市'],
  '太原市': ['小店区', '迎泽区', '杏花岭区'],
  '大同市': ['平城区', '云冈区', '新荣区'],
  '晋中市': ['榆次区', '太谷区', '介休市'],
  '长治市': ['潞州区', '上党区', '屯留区'],
  '临汾市': ['尧都区', '侯马市', '霍州市'],
  '运城市': ['盐湖区', '永济市', '河津市'],
  '沈阳市': ['和平区', '沈河区', '大东区'],
  '大连市': ['中山区', '西岗区', '沙河口区'],
  '长春市': ['南关区', '宽城区', '朝阳区'],
  '吉林市': ['昌邑区', '龙潭区', '船营区'],
  '哈尔滨市': ['道里区', '南岗区', '道外区'],
  '齐齐哈尔市': ['龙沙区', '建华区', '铁锋区'],
  '南京市': ['玄武区', '秦淮区', '建邺区'],
  '苏州市': ['姑苏区', '虎丘区', '吴中区'],
  '无锡市': ['梁溪区', '滨湖区', '新吴区'],
  '杭州市': ['上城区', '下城区', '西湖区'],
  '宁波市': ['海曙区', '江北区', '鄞州区'],
  '温州市': ['鹿城区', '龙湾区', '瓯海区'],
  '合肥市': ['瑶海区', '庐阳区', '蜀山区'],
  '芜湖市': ['镜湖区', '弋江区', '鸠江区'],
  '福州市': ['鼓楼区', '台江区', '仓山区'],
  '厦门市': ['思明区', '湖里区', '集美区'],
  '南昌市': ['东湖区', '西湖区', '青山湖区'],
  '九江市': ['浔阳区', '濂溪区', '柴桑区'],
  '济南市': ['历下区', '市中区', '槐荫区'],
  '青岛市': ['市南区', '市北区', '李沧区'],
  '郑州市': ['中原区', '二七区', '金水区'],
  '洛阳市': ['老城区', '西工区', '涧西区'],
  '武汉市': ['江岸区', '江汉区', '硚口区'],
  '宜昌市': ['西陵区', '伍家岗区', '点军区'],
  '长沙市': ['芙蓉区', '天心区', '岳麓区'],
  '株洲市': ['荷塘区', '芦淞区', '石峰区'],
  '广州市': ['天河区', '越秀区', '海珠区'],
  '深圳市': ['福田区', '南山区', '宝安区'],
  '佛山市': ['禅城区', '南海区', '顺德区'],
  '海口市': ['龙华区', '秀英区', '琼山区'],
  '三亚市': ['吉阳区', '天涯区', '海棠区'],
  '成都市': ['锦江区', '青羊区', '金牛区'],
  '绵阳市': ['涪城区', '游仙区', '安州区'],
  '贵阳市': ['南明区', '云岩区', '花溪区'],
  '遵义市': ['红花岗区', '汇川区', '播州区'],
  '昆明市': ['五华区', '盘龙区', '官渡区'],
  '大理市': ['大理镇', '下关镇', '喜洲镇'],
  '西安市': ['新城区', '碑林区', '莲湖区'],
  '咸阳市': ['秦都区', '渭城区', '杨陵区'],
  '兰州市': ['城关区', '七里河区', '西固区'],
  '天水市': ['秦州区', '麦积区', '清水县'],
  '西宁市': ['城中区', '城东区', '城西区'],
  '台北市': ['中正区', '大同区', '中山区'],
  '高雄市': ['楠梓区', '左营区', '鼓山区'],
  '呼和浩特市': ['新城区', '回民区', '玉泉区'],
  '包头市': ['东河区', '昆都仑区', '青山区'],
  '南宁市': ['青秀区', '兴宁区', '江南区'],
  '桂林市': ['象山区', '秀峰区', '叠彩区'],
  '拉萨市': ['城关区', '堆龙德庆区', '达孜区'],
  '银川市': ['兴庆区', '金凤区', '西夏区'],
  '乌鲁木齐市': ['天山区', '沙依巴克区', '水磨沟区'],
  '喀什市': ['喀什市城区', '疏附县', '疏勒县'],
  '香港': ['中西区', '湾仔区', '东区'],
  '澳门': ['花地玛堂区', '圣安多尼堂区', '大堂区']
}
    };
  },
  methods: {
    // 省份改变时更新城市列表
    onProvinceChange() {
      this.city = '';
      this.district = '';
      this.districts = [];

      if (this.province) {
        this.cities = this.cityData[this.province] || [];
      } else {
        this.cities = [];
      }
    },

    // 城市改变时更新区/县列表
    onCityChange() {
      this.district = '';

      if (this.city) {
        this.districts = this.districtData[this.city] || [];
      } else {
        this.districts = [];
      }
    },

    // 保存地址
    async saveAddress() {
      // 表单验证
      if (!this.recipient) {
        alert('请输入收货人姓名');
        return;
      }

      if (!this.phone || !/^1[3-9]\d{9}$/.test(this.phone)) {
        alert('请输入有效的手机号码');
        return;
      }

      if (!this.province || !this.city || !this.district) {
        alert('请选择完整的所在地区');
        return;
      }

      if (!this.detailAddress) {
        alert('请输入详细地址');
        return;
      }

      // 构建地址对象
      const addressData = {
        recipient_name: this.recipient,
        phone: this.phone,
        province: this.province,
        city: this.city,
        county: this.district,
        detail_address: this.detailAddress,
        is_default: this.isDefault
      };

      // 这里可以添加保存地址的API调用
      try {
        // 调用保存地址的API
        const response = await api.post('http://127.0.0.1:8000/userAddress/', addressData);
        console.log(response);
        // 检查请求是否成功
        if (response.code==200) {
          console.log('地址保存成功:', response.data);
                // 保存成功后携带地址信息跳转到订单页面
      this.$router.push({
        path: '/order',
        query: {
          newAddress: JSON.stringify({
            id: response.data.id, // 假设接口返回了新地址的ID
            ...addressData
          })
        }
      });
    } else {
          alert('保存失败: ' + (response.code || '未知错误'));
        }
      } catch (error) {
        // 处理请求错误
        console.error('保存地址失败:', error);
        if (error.response) {
          // 服务器返回错误
          alert(`保存失败: ${error.response.data.message || '服务器错误'}`);
        } else if (error.request) {
          // 没有收到响应
          alert('保存失败: 无法连接到服务器，请检查网络');
        } else {
          // 其他错误
          alert('保存失败: ' + error.message);
        }
      }

      // 保存成功后可以跳转到地址列表或其他页面
      // alert('地址保存成功！');
      // this.$router.push('/addresslist');
    },

    // 取消操作
    cancel() {
      // 可以返回上一页或清空表单
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.address-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.address-header h2 {
  font-size: 22px;
  color: #333;
  margin: 0;
}

.address-list-btn {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
}

.address-form {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  display: inline-block;
  width: 100px;
  text-align: right;
  margin-right: 15px;
  color: #666;
  vertical-align: top;
  padding-top: 8px;
}

.required {
  color: #ff4d4f;
}

.input-wrapper {
  display: inline-block;
  width: calc(100% - 115px);
  position: relative;
}

.icon-user, .icon-phone, .icon-location, .icon-post {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 10px 10px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
  padding-top: 12px;
}

.region-selectors {
  display: inline-block;
  width: calc(100% - 115px);
}

.region-select {
  width: 32%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 2%;
  font-size: 14px;
  color: #666;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
}

.region-select:last-child {
  margin-right: 0;
}

.region-select:disabled {
  color: #999;
  background-color: #f5f5f5;
}

.default-address-option {
  margin: 20px 0 30px 115px;
}

.default-checkbox {
  margin-right: 8px;
}

.default-label {
  color: #666;
  cursor: pointer;
}

.form-actions {
  margin-left: 115px;
  margin-top: 40px;
}

.btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.save-btn {
  background-color: #8B4513;
  color: white;
  border: none;
  margin-right: 15px;
}

.save-btn:hover {
  background-color: #6d360c;
}

.cancel-btn {
  background-color: white;
  color: #666;
  border: 1px solid #ddd;
}

.cancel-btn:hover {
  background-color: #f5f5f5;
}

.instructions {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 4px;
  color: #666;
}

.instructions h3 {
  margin-top: 0;
  font-size: 16px;
  color: #333;
}

.instructions ul {
  padding-left: 20px;
  margin-bottom: 0;
}

.instructions li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.icon-required, .icon-info {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: middle;
}

.icon-required {
  color: #ff4d4f;
}

.icon-info {
  color: #409eff;
}
</style>
